irongit
dotfiles/waybar/style/[Light] Obsidian Glow.css
202 lines3.8 KBCSS
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* Light - Obsidian Glow */
3
4* {
5font-family: "JetBrainsMono Nerd Font";
6font-weight: bold;
7min-height: 0;
8/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
9font-size: 97%;
10font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
11}
12
13window#waybar {
14 background: white;
15 border-radius: 12px;
16}
17
18window#waybar.hidden {
19 opacity: 0.7;
20}
21
22tooltip {
23 background: white;
24 border-radius: 10px;
25}
26
27tooltip label {
28 color: #373737;
29 padding-right: 2px;
30 padding-left: 2px;
31}
32
33#taskbar button,
34#workspaces button {
35 color: #585b70;
36 box-shadow: none;
37 text-shadow: none;
38 padding: 0px;
39 border-radius: 9px;
40 padding-left: 4px;
41 padding-right: 4px;
42 animation: gradient_f 20s ease-in infinite;
43 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
44}
45
46#workspaces button.active {
47 background-color: dimgrey;
48 color: #000000;
49 border-radius: 15px 15px 15px 15px;
50 padding-left: 8px;
51 padding-right: 8px;
52 animation: gradient_f 20s ease-in infinite;
53 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
54}
55
56#workspaces button.focused {
57 color: #000000;
58}
59
60#workspaces button.urgent {
61 color: #000000;
62 border-radius: 10px;
63}
64
65#workspaces button:hover {
66 color: #000000;
67 border-radius: 15px;
68 padding-left: 2px;
69 padding-right: 2px;
70 animation: gradient_f 20s ease-in infinite;
71 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
72}
73
74#backlight,
75#backlight-slider,
76#battery,
77#bluetooth,
78#clock,
79#cpu,
80#disk,
81#idle_inhibitor,
82#keyboard-state,
83#memory,
84#mode,
85#mpris,
86#network,
87#power-profiles-daemon,
88#pulseaudio,
89#pulseaudio-slider,
90#taskbar,
91#temperature,
92#tray,
93#window,
94#wireplumber,
95#workspaces,
96#custom-backlight,
97#custom-browser,
98#custom-cava_mviz,
99#custom-cycle_wall,
100#custom-dot_update,
101#custom-file_manager,
102#custom-keybinds,
103#custom-keyboard,
104#custom-light_dark,
105#custom-lock,
106#custom-hint,
107#custom-hypridle,
108#custom-menu,
109#custom-playerctl,
110#custom-power_vertical,
111#custom-power,
112#custom-quit,
113#custom-reboot,
114#custom-settings,
115#custom-spotify,
116#custom-swaync,
117#custom-tty,
118#custom-updater,
119#custom-weather,
120#custom-weather.clearNight,
121#custom-weather.cloudyFoggyDay,
122#custom-weather.cloudyFoggyNight,
123#custom-weather.default,
124#custom-weather.rainyDay,
125#custom-weather.rainyNight,
126#custom-weather.severe,
127#custom-weather.showyIcyDay,
128#custom-weather.snowyIcyNight,
129#custom-weather.sunnyDay {
130 color: #000000;
131 border-radius: 8px;
132 padding-top: 4px;
133 padding-bottom: 4px;
134 padding-right: 6px;
135 padding-left: 6px;
136}
137
138#temperature.critical {
139 background-color: #ff0000;
140}
141
142@keyframes blink {
143 to {
144 color: #000000;
145 }
146}
147
148/*-----Indicators----*/
149#custom-hypridle.notactive,
150#idle_inhibitor.activated {
151 color: #39FF14;
152}
153
154#taskbar button.active {
155 background-color: #585b70;
156 color: #cdd6f4;
157 padding-left: 12px;
158 padding-right: 12px;
159 animation: gradient_f 20s ease-in infinite;
160 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
161}
162
163#taskbar button:hover {
164 padding-left: 3px;
165 padding-right: 3px;
166 animation: gradient_f 20s ease-in infinite;
167 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
168}
169
170#battery.critical:not(.charging) {
171 color: #f53c3c;
172 animation-name: blink;
173 animation-duration: 3.0s;
174 animation-timing-function: steps(12);
175 animation-iteration-count: infinite;
176 animation-direction: alternate;
177}
178
179#backlight-slider slider,
180#pulseaudio-slider slider {
181 min-width: 0px;
182 min-height: 0px;
183 opacity: 0;
184 background-image: none;
185 border: none;
186 box-shadow: none;
187}
188
189#backlight-slider trough,
190#pulseaudio-slider trough {
191 min-width: 80px;
192 min-height: 5px;
193 border-radius: 5px;
194 background-color: grey;
195}
196
197#backlight-slider highlight,
198#pulseaudio-slider highlight {
199 min-height: 10px;
200 border-radius: 5px;
201 background-color: #ba5663;
202}